<template>
  <div class="logo-setting">
    <div>
      <upload v-for="data in uploadList" :key="data.title" :data="data" />
    </div>
  </div>
</template>

<script setup lang="ts">
import upload from './upload';
import { useGlobalStore } from '@/store/global';
import { ElMessage } from 'element-plus';

defineOptions({
  name: 'settingLogo',
});

const globalStore = useGlobalStore();
const defaultSrc = globalStore.defaultSrc;
const defaultFavicon = globalStore.defaultFavicon;

const onUpdate = async (type: string, val: any) => {
  let detailField = {};
  try {
    detailField = JSON.parse(globalStore.appConfig.detailField ?? '{}');
  } catch (error) {}
  const data = {
    ...globalStore.appConfig,
    detailField: JSON.stringify({
      ...detailField,
      [type]: val ? val.data : type === 'logo' ? defaultSrc : defaultFavicon,
    }),
  };
  await globalStore.updateAppBaseConfig(data);
  ElMessage.success('操作成功');
};

const uploadList = computed(() => {
  let detailField: any = {};
  try {
    detailField = JSON.parse(globalStore.appConfig.detailField ?? '{}');
  } catch (error) {}
  return [
    {
      title: '系统页面LOGO',
      tip: '建议选择至少30*30分辨率图片作为系统页面',
      src: detailField.logo ?? defaultSrc,
      onUpdate: (val: any) => onUpdate('logo', val),
    },
    {
      title: '系统页签LOGO',
      tip: '建议选择至少16*16分辨率图片作为页签LOGO',
      src: detailField.favicon ?? defaultFavicon,
      onUpdate: (val: any) => onUpdate('favicon', val),
    },
  ];
});
</script>

<style lang="less" scoped>
.logo-setting {
  > div {
    display: flex;
    gap: 24px;
    flex-wrap: wrap;
  }
}
</style>
